import { mapActions } from 'vuex';
import authModal from '@/utils/mixins/modal/auth';
import { MAILBOX } from '@/utils/mixins/sendCode/type';

export default {
  mixins: [authModal],

  data() {
    return {
      // form
      form: this.$form.createForm(this),

      // state
      state: {
        time: 60,
        loginBtn: false,
        // login type: 0 email, 1 username, 2 telephone
        loginType: 0,
        smsSendBtn: false
      }
    };
  },
  methods: {
    ...mapActions(['Register']),

    // Confirm Password form rule
    confirmPasswordFormRule(rule, value, callback) {
      const choosePassword = this.form.getFieldValue('password');

      if (value !== choosePassword) {
        callback('The confirmation password and password are different');
        return false;
      }

      callback();
    },

    // agreement rule
    agreementRule(rule, value, callback) {
      const agreement = this.form.getFieldValue('agreement');

      if (!agreement) {
        callback('Please read and agree to the agreement!');

        return false;
      }

      callback();
    },

    // send code email
    sendEmailCode() {
      const fields = ['first_name', 'last_name', 'email'];
      let data = this.form.getFieldsValue(fields);
      data = { ...data, template_type: MAILBOX };

      this.sendCode(fields, data)
        .then(() => {
          this.$notification.success({
            message: '我们已发送验证码到此邮箱, 请注意查收!'
          });
        });
    },

    // register
    handleRegister(e) {
      e.preventDefault();

      const { state } = this;

      state.loginBtn = true;

      this.validateFieldsForm()
        .then(() => {
          this.submitForm()
            .then((res) => {
              this.SubmitSuccess(res);
            })
            .finally(() => {
              state.loginBtn = false;
            });
        })
        .catch(() => {
          state.loginBtn = false;
        });
    },

    // success
    SubmitSuccess(res) {
      this.$router.push({ path: '/' })
        .then(() => {
          setTimeout(() => {
            this.authModal();
          }, 1000);
        });
    },

    // register user
    submitForm() {
      const validateFieldsKey = ['first_name', 'last_name', 'email', 'code', 'password', 'confirm_password'];

      return new Promise((resolve, reject) => {
        const fields = this.form.getFieldsValue(validateFieldsKey);

        this.Register(fields)
          .then((data) => {
            resolve(data);
          })
          .catch((error) => {
            reject(error);
          });
      });
    },

    validateFieldsForm() {
      return new Promise((resolve, reject) => {
        const {
          form: { validateFields }
        } = this;

        const validateFieldsKey = ['first_name', 'last_name', 'email', 'code', 'password', 'confirm_password', 'agreement'];

        validateFields(validateFieldsKey, { force: true, first: true }, (err, values) => {
          if (!err) {
            resolve();
            return false;
          }
          reject(false);
        });
      });
    }
  }
};
